<ng-container *ngIf="mode != MODES.Simple">
  <div class="form-group mb-2 row" [formGroup]="parentFormGroup">
  <label class="col-sm-3 col-check-label">
    {{data.label}}: <span class="required" *ngIf="data?.required">*</span>
  </label>
  <div class="col-sm-9">
    <div class="input-group input-group-sm ">
      <ng-container [ngSwitch]="true">
        <ng-container *ngSwitchCase="mode == MODES.View">
          <div class="custom-control custom-checkbox">
            <input type="checkbox" name="{{namePrefix + data.name}}" class="custom-control-input"
                   [formControlName]="data.name" id="{{namePrefix + data.name}}"/>
            <label class="custom-control-label" for="{{namePrefix + data.name}}"></label>
          </div>
        </ng-container>
        <ng-container *ngSwitchCase="mode == MODES.Create || mode == MODES.Edit || mode == MODES.Bulk">
          <div class="container">
            <div class="row">
              <div class="col-sm-auto p-0" *ngIf="mode == MODES.Bulk">
                <cmdb-object-bulk-input-appends [data]="data"
                                                [mode]="mode"
                                                [parentFormGroup]="parentFormGroup" ></cmdb-object-bulk-input-appends>
              </div>
              <div class="col-sm-4">
                <div class="custom-control custom-checkbox">
                  <input type="checkbox" name="{{namePrefix + data.name}}" class="custom-control-input"
                         [formControlName]="data.name" [attr.id]="namePrefix + data.name"
                         [ngClass]="{ 'is-valid': controller.valid && (controller.dirty || controller.touched),
                 'is-invalid': controller.invalid && (controller.dirty || controller.touched)}"/>
                  <label class="custom-control-label" for="{{namePrefix + data.name}}"></label>
                </div>
              </div>
              <div class="col-sm">
                <cmdb-input-appends [data]="data" [mode]="mode" [parentFormGroup]="parentFormGroup"></cmdb-input-appends>
              </div>
            </div>
          </div>
        </ng-container>
        <div *ngSwitchDefault>
          <cmdb-mode-error></cmdb-mode-error>
        </div>
      </ng-container>
      <div *ngIf="controller.invalid && (controller.dirty || controller.touched)" class="invalid-feedback">
        <div class="float-right" *ngIf="controller.errors.required">
          {{data.label}} is a required field.
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>
</ng-container>

<ng-container *ngIf="mode == MODES.Simple">
  <i [ngClass]=" data.value == true ? 'fa fa-check-square-o':'fa fa-square-o'" aria-hidden="true"></i>
  <span style="display: none">{{data.value}}</span>
</ng-container>
